import React, { ReactNode, Component, Fragment } from 'react';
import { Table } from 'antd';

import { getWithdrawColumns, StateType, PropType } from '../utils';
import { getWithdrawInfo } from '../service';
import { SUCCESS_CODE } from '../data';
import styles from '@/pages/finance/search/style.less';

class WithdrawInfo extends Component<PropType, StateType> {
  public state = {
    loading: false,
    tableData: {
      list: [],
    },
  };

  componentDidMount() {
    this.getList();
  }

  // 获取表格数据
  getList = (e?: React.SyntheticEvent) => {
    if (e) e.preventDefault();
    this.setState({ loading: true });
    getWithdrawInfo({ userId: this.props.id }).then((res: any) => {
      if (res) {
        const { code, data } = res;
        if (code === SUCCESS_CODE && data) {
          this.setState({ tableData: { list: [data] }, loading: false });
        }
      }
    });
  };

  render(): ReactNode {
    const { loading, tableData } = this.state;
    const { onTabChange } = this.props;

    return (
      <Fragment>
        <h3 style={{ marginTop: '20px' }}>
          <span>提现流水信息</span>
          <span className={styles.btn} onClick={() => onTabChange('2')}>
            流水详情
          </span>
        </h3>
        <Table
          bordered
          size="small"
          style={{ wordBreak: 'break-all' }}
          rowKey={(record: any, index: number) => String(index)}
          loading={loading}
          columns={getWithdrawColumns()}
          dataSource={tableData.list}
          pagination={false}
        />
      </Fragment>
    );
  }
}

export default WithdrawInfo;
